<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="title"
    :width="width"
  >
    <div
      style="
        min-height: 240px;
        max-height: 360px;
        padding: 0px;
        overflow-x: hidden;
        overflow-y: auto;
      "
    >
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="6" style="height: 30px">当前默认打印机</el-col>
        <el-col :span="18" style="height: 30px; text-align: right">
          {{ state.printerName }}
        </el-col>
      </el-row>
      <el-row align="middle" style="margin-top: 10px">
        <el-col
          :span="6"
          style="height: 30px; line-height: 30px; vertical-align: middle"
          >选择打印机</el-col
        >
        <el-col :span="18" style="height: 30px; text-align: right">
          <el-select
            v-model="state.printerIndex"
            placeholder="请选择"
            style="width: 75%"
          >
            <el-option
              v-for="item in state.printerList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        设为默认
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="PrinterPicker">
import { reactive } from "vue";
import { getLodop } from "@/assets/LodopFuncs";

const props = defineProps({
  title: {
    type: String,
    default: "选择打印机"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: false
  },
  expanderKeys: {
    type: Array,
    default: function () {
      return [];
    }
  }
});
const emits = defineEmits(["change"]);

const state = reactive({
  printerList: [],
  printerName: "",
  printerIndex: 0,
  dialogVisible: false
});

const queryPrinterList = () => {
  const LODOP = getLodop();
  if (!state.printerName) {
    state.printerName = LODOP.GET_PRINTER_NAME(-1);
  }
  const iPrinterCount = LODOP.GET_PRINTER_COUNT();
  for (let i = 0; i < iPrinterCount; i++) {
    const item = {};
    item.name = LODOP.GET_PRINTER_NAME(i);
    item.value = i;
    state.printerList.push(item);
  }
};

const show = () => {
  queryPrinterList();
  state.dialogVisible = true;
};

const close = () => {
  state.printerList = [];
  state.dialogVisible = false;
};

const save = () => {
  const LODOP = getLodop();
  const item = state.printerList[state.printerIndex];
  LODOP.SET_PRINT_MODE("WINDOW_DEFPRINTER", item.name);
  state.printerName = item.name;
  state.printerIndex = 0;
  context.emit("change", {});
  close();
};

defineExpose({
  close,
  save,
  show
});
</script>
<style lang="scss" scoped></style>
